<template>
  <!--  督办事项台账  -->
    <div>
        <div class="tabs-box">
            <el-tabs v-model="state.type" @tab-click="handleClick">
                <el-tab-pane label="督办中" name="1"></el-tab-pane>
                <el-tab-pane label="已督办" name="2"></el-tab-pane>
            </el-tabs>
            <div class="button-ldjb d-flex a-center m-l5 m-b10">
                <label>部门</label>
                <el-select
                    clearable
                    v-model="form.departmentId"
                    class="m-l5"
                    placeholder="选择部门"
                    @change="departmentChange"
                >
                    <el-option v-for="(item,index) in state.departmentList" :key="index" :value="item.deptId" :label="item.deptName"></el-option>
                </el-select>
            </div>
        </div>
        <div class="search-wrap d-flex a-center flex-wrap">
            <div class="search-item d-flex a-center m-b10">
                <label>事项说明</label>
                <el-input clearable class="m-l5" v-model="form.keyword" placeholder="搜索事项说明"></el-input>
            </div>
            <div class="search-item d-flex a-center m-l5 m-b10">
                <label>状态</label>
                <el-select
                        clearable
                        v-model="form.status"
                        class="m-l5"
                        placeholder="选择状态"
                >
                    <el-option value="-1" label="未开始"></el-option>
                    <el-option value="0" label="进行中"></el-option>
                    <el-option value="1" label="已完成"></el-option>
                    <el-option value="2" label="已督办"></el-option>
                    <el-option value="3" label="督办驳回"></el-option>
                </el-select>
            </div>
            <div class="search-item d-flex a-center m-l5 m-b10">
                <label>选择计划时间</label>
                <el-date-picker
                        clearable
                        class="m-l5"
                        v-model="form.valueTime"
                        type="datetimerange"
                        size="large"
                        range-separator="-"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        @change="valueTimeChange"
                />
            </div>
            <div class="search-item d-flex a-center m-l5 m-b10">
                <label>执行人</label>
                <el-select
                        clearable
                        v-model="form.executeUserId"
                        class="m-l5"
                        placeholder="选择状态"
                >
                    <el-option v-for="(item,index) in state.userList" :key="index" :value="item.userId" :label="item.userName"></el-option>
                </el-select>
            </div>
            <div class="search-item d-flex a-center m-l5 m-b10">
                <label>执行人</label>
                <el-select
                    clearable
                    v-model="form.superviseUserId"
                    class="m-l5"
                    placeholder="选择状态"
                >
                    <el-option v-for="(item,index) in state.userList" :key="index" :value="item.userId" :label="item.userName"></el-option>
                </el-select>
            </div>
            <div class="search-item d-flex a-center m-l5 m-b10">
                <label>事项类型</label>
                <el-select
                        clearable
                        v-model="form.superviseType"
                        class="m-l5"
                        placeholder="选择状态"
                >
                    <el-option value="1" label="领导督办"></el-option>
                    <el-option value="2" label="项目任务"></el-option>
                    <el-option value="3" label="周报计划"></el-option>
                </el-select>
            </div>
            <div class="search-buttons m-l50 m-b10">
                <el-button
                        color="#fc702b"
                        style="color:#fff;"
                        @click.prevent="onQuery"
                >查询</el-button>
                <el-button
                        color="#f0f0f0"
                        style="color: #000000"
                        @click.prevent="onReset"
                >重置</el-button>
            </div>
        </div>
        <el-main v-loading="isLoading" element-loading-text="loading..." >
            <public-table
                    class="m-t20"
                    index
                    :page="page"
                    height="550"
                    :tableData="tableData"
                    :tableOption.sync="tableOption"
                    @page-change="onPageChange"
            >
                <template #createName="scope">
                    <span>{{scope.row.createTime}}({{scope.row.createName}})</span>
                </template>
                <template #update="scope">
                    <el-button size="small" @click="toPath(scope.row)">查看</el-button>
                </template>
            </public-table>
        </el-main>
    </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {department, superviseAndHandle} from "@/api/project";
import PublicTable from "@/components/PublicTable.vue";
import {ElTabs, ElTabPane, ElDatePicker, ElMain, ElForm} from "element-plus";
import {localGet, resetForm} from "@/common/utils/GlobalUtils";
import SvgIcon from "@/components/SvgIcon/index.vue";
import {fundManagementApi} from "@/api/businessFinance";
import {useRouter} from "vue-router";

const state = reactive({
    type:'1',
    userList:[],
    departmentList:[]
});

const isLoading = ref(false);

const form = reactive({
    keyword:'',
    status:'',
    valueTime:'',
    startTime:'',
    endTime:'',
    departmentId:'',
    executeUserId:'', // 执行人
    superviseUserId:'',
    superviseType:'', // 事项类型
});

const page = reactive({
    total: 0,
    current: 1,
    size: 50
});

const tableData = ref([]);

const tableOption = ref([
    { label: "ID", prop: "superviseId" },
    { label: "督办事项", prop: "superviseContent" },
    { label: "执行人 ", prop: "executeUserName" },
    { label: "督办人 ", prop: "superviseUserName" },
    { label: "计划完成时间 ", prop: "planEndTime" },
    { label: "状态", prop: "status",formatter:(val)=>{
            return {'-1':'未开始','0':'进行中','1':'已完成','2':'已督办','3':'督办驳回'}[val]
        } },
    { label: "督办来源 ", prop: "superviseType",formatter:(val)=>{
            return {'1':'领导督办','2':'项目任务','3':'周报计划'}[val]
        } },
    { label: "督办时间/创建人", prop: "createName",slot:true },
    { label: "操作", prop: "update",slot:true },
]);

/**
 * 我的督办/我的执行
 * @param params
 * @param callback
 */
const mySupervisorAndMyExecution = (params,callback) => {
    superviseAndHandle.underSupervision(params).then(res=>{
        if(callback)callback();
        if(res.code==='200'){
            tableData.value = res.data.content;
            page.total = res.data.tatalSize;
        }
    });
}

const onPageChange = (e) => {
    page.current = e.page;
    page.size = e.limit;
    let param = {
        param: {
            ...form,
            type:state.type
        },
        pageNum: page.current,
        pageSize: page.size
    };
    mySupervisorAndMyExecution(param);
}

/**
 * tab被点击
 * @param e
 */
const handleClick = (e) => {
    state.type = (parseInt(e.index)+ 1).toString();
    page.current = 1;
    page.size = 50;
    resetForm(form);
    let param = {
        param: {
            ...form,
            type:state.type
        },
        pageNum: page.current,
        pageSize: page.size
    };
    isLoading.value = true;
    mySupervisorAndMyExecution(param,()=>{isLoading.value = false;});
}

/**
 * 条件查询
 */
const onQuery = () => {
    page.current = 1;
    page.size = 50;
    let param = {
        param: {
            ...form,
            type:state.type
        },
        pageNum: page.current,
        pageSize: page.size
    };
    isLoading.value = true;
    mySupervisorAndMyExecution(param,()=>{isLoading.value = false;});
}

/**
 * 重置
 */
const onReset = () => {
    page.current = 1;
    page.size = 50;
    resetForm(form);
    let param = {
        param: {
            ...form,
            type:state.type
        },
        pageNum: page.current,
        pageSize: page.size
    };
    isLoading.value = true;
    mySupervisorAndMyExecution(param,()=>{isLoading.value = false;});
}

/**
 * 时间选择
 * @param e
 */
const valueTimeChange = (e) => {
    form.startDate = '';
    form.endDate = '';
    if (e) {
        form.startDate = e[0];
        form.endDate = e[1];
    }
}

/**
 * 根据部门查人
 * @param departmentId
 */
const getUserByDepartmentId = (departmentId) => {
    department.getUserByDepartmentId(departmentId).then(res=>{
        if(res.code==='200'){
            state.userList = res.data;
        }
    })
}

const assignedByLeadersPopupRef = ref(null);

/**
 * 打开弹窗
 */
const openPopup = () => {
    assignedByLeadersPopupRef.value.openPopup();R
}

/**
 * 查询部门列表
 */
const getDepartmentList = () => {
    fundManagementApi.getDepartmentVo().then(res=>{
        if(res.code==='200'){
            state.departmentList = res.data;
        }
    });
}

const departmentChange = (e) => {
    state.userList = [];
    form.executeUserId = '';
    form.superviseUserId = '';
    if(e){
        getUserByDepartmentId(e);
    }
}

const router = useRouter();

/**
 * 跳转详情
 * @param row
 */
const toPath = (row) => {
    router.push({path:`/supervisionMatters/mySupervisionMatters/supervisionDetails/superviseId=${row.superviseId}&isLook=1`});
}

onMounted(()=>{
    mySupervisorAndMyExecution({
        pageNum:1,
        pageSize:50,
        param:{
            type:state.type
        }
    });
    form.departmentId = localGet('DepartmentId');
    getDepartmentList();
    getUserByDepartmentId(localGet('DepartmentId'));
});
</script>

<style lang="scss" scoped>
.tabs-box{
  position: relative;
  .button-ldjb{
    position: absolute;
    top:-10px;
    right: 0;
  }
}

.search-wrap{
  .search-item{
    .el-input{
      width: auto !important;
    }
  }
  .search-buttons{
    .icon-export{
      width: 18px;
      height: 18px;
    }
  }
}
</style>
